<template>
  <div class="business-line-container">
    <div class="sidebar">
      <div class="nav-group">
        <div class="nav-item active">未分组 (11)</div>
        <div class="nav-item">外派员工 (0)</div>
        <div class="nav-item">内部员工 (0)</div>
      </div>
      <div class="manage-group">
        <ElButton type="text" class="manage-btn"> 管理业务线组</ElButton>
      </div>
    </div>
    <div class="content">
      <div class="action-bar">
        <div class="search-box">
          <ElInput
            v-model="state.searchText"
            placeholder="搜索名称"
            class="search-input"
            clearable="">
            <template #prefix="scope_5l7uco7rs">
              <XIcon
                :icon="Search"
                :size="16"
                color="#999999"></XIcon> </template
          ></ElInput>
          <ElButton class="filter-btn" :icon="Filter"></ElButton>
        </div>
        <ElButton type="primary" class="add-btn"> 新增业务线</ElButton>
      </div>
      <div class="table-container">
        <ElTable
          :data="state.tableData"
          :style="{ width: '100%' }"
          border=""
          class="ElTable_5r7uco7rs">
          <ElTableColumn prop="name" label="业务线名称" width="180">
            <template #default="scope_5s7uco7rs">
              <span>
                {{ scope_5s7uco7rs.row.name || '这里显示的业务线名称' }}</span
              >
            </template></ElTableColumn
          >
          <ElTableColumn prop="industry" label="行业类型" width="220">
            <template #default="scope_5u7uco7rs">
              <span>
                {{
                  scope_5u7uco7rs.row.industry || '人力资源类/人事劳动合同'
                }}</span
              >
            </template></ElTableColumn
          >
          <ElTableColumn prop="contractType" label="签约类型" width="120">
            <template #default="scope_5w7uco7rs">
              <span> {{ scope_5w7uco7rs.row.contractType || '新签' }}</span>
            </template></ElTableColumn
          >
          <ElTableColumn prop="status" label="状态" width="120">
            <template #default="scope_5y7uco7rs">
              <div class="status-cell">
                <span
                  class="status-dot span_607uco7rs"
                  :style="{
                    backgroundColor:
                      scope_5y7uco7rs.row.status === '启用'
                        ? '#52C41A'
                        : '#FF4D4F'
                  }"></span>
              </div> </template
          ></ElTableColumn>
          <ElTableColumn prop="updateTime" label="更新时间" width="180">
            <template #default="scope_627uco7rs">
              <span> {{ scope_627uco7rs.row.updateTime }}</span>
            </template></ElTableColumn
          >
          <ElTableColumn label="操作" width="180">
            <template #default="scope_647uco7rs">
              <ElLink type="primary" class="action-link"> 配置</ElLink>
              <ElLink type="primary" class="action-link"> 编辑</ElLink>
              <ElButton
                type="text"
                :icon="More"
                class="more-btn"></ElButton> </template></ElTableColumn
        ></ElTable>
      </div>
      <div class="pagination">
        <div class="total">共 50 条</div>
        <ElPagination
          v-model:current-page="state.currentPage"
          :page-size="state.pageSize"
          :total="50"
          layout="prev, pager, next"
          :pager-count="5"></ElPagination>
        <ElSelect v-model="state.pageSize" class="page-size-select">
          <ElOption :value="10" label="10条/页"></ElOption>
          <ElOption :value="20" label="20条/页"></ElOption>
          <ElOption :value="50" label="50条/页"></ElOption
        ></ElSelect>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import {
    ElButton,
    ElInput,
    ElTable,
    ElTableColumn,
    ElLink,
    ElPagination,
    ElSelect,
    ElOption
  } from 'element-plus';
  import { XIcon } from '@vtj/ui';
  import { Search, Filter, More } from '@vtj/icons';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'Image2Code',
    components: {
      ElButton,
      ElInput,
      XIcon,
      ElTable,
      ElTableColumn,
      ElLink,
      ElPagination,
      ElSelect,
      ElOption
    },
    setup(props) {
      const provider = useProvider({ id: '37ucg6et', version: '1752734321602' });
      const state = reactive({
        searchText: '',
        currentPage: 1,
        pageSize: 10,
        tableData: Array(4).fill({
          name: '',
          industry: '人力资源类/人事劳动合同',
          contractType: '新签',
          status: '停用',
          updateTime: '2025-05-20 15:20:32'
        })
      });
      return { state, props, provider, Search, Filter, More };
    }
  })
</script>
<style lang="scss" scoped>
  .business-line-container {
    display: flex;

    height: calc(100vh - 90px);
    background-color: #ffffff;
  }

  .sidebar {
    width: 220px;
    padding: 16px 0;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fafafa;
  }

  .nav-group {
    flex: 1;
  }

  .nav-item {
    padding: 12px 24px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    transition: all 0.3s;
  }

  .nav-item:hover {
    background-color: #f5f5f5;
  }

  .nav-item.active {
    background-color: #e6f7ff;
    color: #1890ff;
    font-weight: 500;
    border-right: 3px solid #1890ff;
  }

  .manage-group {
    padding: 16px;
    border-top: 1px solid #e8e8e8;
  }

  .manage-btn {
    width: 100%;
    color: #1890ff;
    font-size: 14px;
  }

  .content {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .search-box {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .search-input {
    width: 300px;
  }

  .filter-btn {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
  }

  .add-btn {
    background-color: #1890ff;
    border-color: #1890ff;
    padding: 8px 16px;
    height: auto;
  }

  .table-container {
    flex: 1;
    margin-bottom: 24px;
  }

  .status-cell {
    display: flex;
    align-items: center;
  }

  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .action-link {
    margin-right: 16px;
    font-size: 14px;
  }

  .more-btn {
    padding: 0;
    margin-left: 8px;
    color: #999;
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }

  .total {
    margin-right: 16px;
    color: #666;
    font-size: 14px;
  }

  .page-size-select {
    margin-left: 16px;
    width: 100px;
  }

  :deep(.el-table th) {
    background-color: #fafafa;
    color: #333;
    font-weight: 500;
  }

  :deep(.el-table td) {
    padding: 12px 0;
  }

  :deep(.el-table .cell) {
    padding: 0 16px;
  }
</style>
